<template lang="html">
  <div>
    <table id="shopping-list">
      <thead>
        <tr>
          <th colspan="3">购物车</th>
        </tr>
        <tr>
          <th>名称</th><th>价格</th><th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list">
          <td>{{item.name}}</td><td>{{item.price}}</td>
          <td @click="delGoods(index)" class="del-goods">删除</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">总价</td><td>{{totalPrice}}(共{{counts}}件商品)</td>
        </tr>
      </tfoot>
    </table>
    <div class="goods-list">
      <h3>商品列表</h3>
      <ul>
        <li v-for="(item,index) in goods">{{item.name}}  {{item.price}} <a @click="addGoods(index)">加入购物车</a> </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name:"ShoppingCart",
  data(){
    return{
      list:[
        {name:"柠檬茶",price:18.0},
        {name:"维他奶",price:16.5},
        {name:"矿泉水",price:3.5}
      ],
      goods:[
        {name:"笔记本",price:5.0},
        {name:"键盘",price:30.0},
        {name:"便利贴",price:2.0},
        {name:"柠檬茶",price:18.0},
        {name:"维他奶",price:16.5},
        {name:"矿泉水",price:3.5}
      ]
    }
  },
  computed:{
    totalPrice(){
      var num = 0;
      for (var i = 0; i < this.list.length; i++) {
        num += this.list[i].price;
      }
      return num.toFixed(1);
    },
    counts(){
      return this.list.length;
    }
  },
  methods:{
    delGoods(index){
      this.list.splice(index,1);
    },
    addGoods(index){
      this.list.push(this.goods[index]);
    }
  }
}
</script>

<style lang="css">
 .del-goods,a{
   cursor: pointer;
 }
 ul{
   list-style-type: none;
 }
</style>
